<template>
  <view class="add-work-experience">
    <view class="uni-nav-bar">新增工作经历</view>

    <form class="experience-form">
      <view class="form-group">
        <label class="form-label">任职所在单位</label>
        <input
            type="text"
            placeholder="请输入任职所在单位"
            class="form-input"
            v-model="company"
        />
      </view>

      <view class="form-group">
        <label class="form-label">任职开始日期</label>
        <picker
            mode="date"
            @change="onStartDateChange"
            class="form-picker"
        >
          <view class="picker-placeholder">
            {{ startDate || "请选择开始日期" }}
          </view>
        </picker>
      </view>

      <view class="form-group">
        <label class="form-label">任职结束日期</label>
        <picker
            mode="date"
            @change="onEndDateChange"
            class="form-picker"
        >
          <view class="picker-placeholder">
            {{ endDate || "请选择结束日期" }}
          </view>
        </picker>
      </view>

      <view class="form-group">
        <label class="form-label">任职类别</label>
        <picker
            mode="selector"
            :range="jobTypes"
            @change="onJobTypeChange"
            class="form-picker"
        >
          <view class="picker-placeholder">
            {{ selectedJobType || "请选择任职类别" }}
          </view>
        </picker>
      </view>

      <view class="form-group">
        <label class="form-label">任职所带学生类别</label>
        <input
            type="text"
            placeholder="请输入学生类别"
            class="form-input"
            v-model="studentType"
        />
      </view>

      <view class="form-group">
        <label class="form-label">任职所带学生总数</label>
        <input
            type="number"
            placeholder="请输入学生总数"
            class="form-input"
            v-model="studentCount"
        />
      </view>

      <view class="form-buttons">
        <button class="cancel-btn" @click="onCancel">取消</button>
        <button class="submit-btn" @click="onSubmit">提交</button>
      </view>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      company: "", // 任职单位
      startDate: "", // 开始日期
      endDate: "", // 结束日期
      jobTypes: ["行政干部", "教学人员"], // 任职类别
      selectedJobType: "", // 选中的任职类别
      studentType: "", // 学生类别
      studentCount: "" // 学生总数
    };
  },
  methods: {
    onStartDateChange(e) {
      this.startDate = e.detail.value;
    },
    onEndDateChange(e) {
      this.endDate = e.detail.value;
    },
    onJobTypeChange(e) {
      this.selectedJobType = this.jobTypes[e.detail.value];
    },
    onSubmit() {
      if (!this.company || !this.startDate || !this.selectedJobType) {
        uni.showToast({ title: "请完善必填信息", icon: "none" });
        return;
      }
      uni.showToast({ title: "提交成功" });
      uni.navigateBack();
    },
    onCancel() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
/* 样式与 AddStudyExperience.vue 一致，可复用 */
.add-work-experience {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.uni-nav-bar {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.experience-form {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.form-label {
  font-size: 28rpx;
  font-weight: 500;
}
.form-input, .form-picker {
  padding: 18rpx;
  background-color: #fff;
  border-radius: 8rpx;
  font-size: 26rpx;
  border: 2rpx solid #eee;
}
.picker-placeholder {
  color: #999;
  font-size: 26rpx;
}
.form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  margin-top: 40rpx;
}
.cancel-btn {
  padding: 0 36rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  background-color: #fff;
  font-size: 28rpx;
}
.submit-btn {
  padding: 0 36rpx;
  background-color: #c0392b;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
}
</style>